<template>
	<router-view v-slot="{ Component }">
		<transition name="fade-transform" mode="out-in" appear>
			<keep-alive :include="cachedViews">
				<component :is="Component" :key="routeKey" />
			</keep-alive>
		</transition>
	</router-view>
</template>

<script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import store from './store'
import { toHump } from './utils'
export default defineComponent({
	name: 'Main',
	setup() {
		const state = store.state
		const route = useRoute()
		const routeKey = ref(route.fullPath)
		const cachedViews = computed(() => {
			return state.cachedView.map(it => it)
		})
		watch(
			() => route.fullPath,
			() => {
				if (route.name && route.meta && route.meta.cacheable) {
					const humName = toHump(route.name as string)
					if (!store.state.cachedView.includes(humName)) {
						store.state.cachedView.push(humName)
					}
				}
				routeKey.value = route.fullPath
			},
			{
				immediate: true
			}
		)
		return {
			state,
			cachedViews,
			routeKey
		}
	}
})
</script>
